import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
import { onBeforeUnmount, onMounted, ref } from '@vue/runtime-core'
declare type ElementParam = HTMLElement | string;
BScroll.use(Slide)

export default () => {
    const wrapper = ref<null | ElementParam>(null)
    const slider = ref<null | BScroll>(null)
    const currentPageIndex = ref<number>(0)
    onMounted(() => {
        if (wrapper.value !== null) {
            slider.value = new BScroll(wrapper.value as ElementParam, {
                click: true,
                scrollX: true,
                scrollY: false,
                momentum: false,
                bounce: false,
                probeType: 2,
                slide: true
            })

            slider.value.on('slideWillChange', ({ pageX }: any) => {
                currentPageIndex.value = pageX
            })
        }
    })
    onBeforeUnmount(() => {
        slider.value && slider.value.destroy()
    })
    return {
        wrapper,
        currentPageIndex
    }
}
